<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>工作详情-云校通-家长</title>
<jsp:include page="/WEB-INF/page/common/_header.jsp"></jsp:include>
<body ontouchstart style="background: #FFFFFF;">
	<div class="weui-header"> 
		<div class="weui-header-left"> <a href="<%=basePath %>/ls/coordination/office" class="icon icon-109 f-black">返回</a></div>
		<h1 class="weui-header-title f-black">
			<fmt:parseDate value='${detail.workDate }' var='date2' pattern='yyyy/MM/dd'/>
			<fmt:formatDate value="${date2 }" type="date" dateStyle="full"/>
		</h1>
	</div>
	<div style="margin-bottom: 50px;">
		<div class="weui_cells borderLeft xtbg-add-list pb10" style="margin-top:0;">
            <div class="weui_cell " href="javascript:;">
                <div class="weui_cell_bd weui_cell_primary">
                    <p>发布人: ${detail.sender }</p>
                </div>
            </div>
            <div class="weui_cell">
				<div class="weui_cell_bd weui_cell_primary f-15">
					<p>${detail.content }</p>
				</div>
			</div>
            <div class="pb10">
            	<div class="weui_uploader_bd pl5">
					<ul class="weui_uploader_files gzbx_pic img-click" style="padding-left: 0;">
						<c:forEach var="item" items="${detail.senderAttachList }">
							<c:if test="${item.attachmentType == 'image' }">
								<li class="weui_uploader_file"><img onclick="imgClick(this)" src="${config.imgUrl }${item.attachmentUrl}"></li>
							</c:if>
						</c:forEach>
                    </ul>
                </div>
			</div>
			<div class="weui_cells xs_c_piclist">
                <div class="xs_c_picWrap clearfix">
					<c:forEach var="item" items="${detail.senderAttachList }">
						<c:if test="${item.attachmentType != 'image' }">
							<div class="xtbg-upload-list mb10 p5">
								<div class="xtbg-upload-list-inner">
									<p>${item.attachmentName}</p>
									<a href="${config.imgUrl}${item.attachmentUrl}" class="weui_btn weui_btn_mini weui_btn_primary f-white bg-blue">查看</a>
								</div> 
							</div>
						</c:if>
					</c:forEach>
				</div>
			</div>
			<c:if test="${detail.feedback != null }">
				<div class="bg-white pr10 f_15">
					<div class="weui_cell lblue">
			             <div class="weui_cell_bd weui_cell_primary">
			                 <p class="bold pr">工作反馈</p>
			             </div>
			         </div>
			    </div>
				<div class="wdgz-list-content">
					<div class="weui_panel weui_panel_access wdgz-list-wcqk" style="display: block;">
			            <div class="weui_panel_bd">
			                <div class="weui_media_box weui_media_text" style="padding-left: 15px;">
			                    <p class="weui_media_desc f-black f15" style="padding-left:0;line-height:1.5em;-webkit-line-clamp:inherit;">完成情况：${detail.feedback }</p>
			                </div>
			            </div>
			       </div>
				</div>
				<div class="mt10">
					<div class="weui_uploader_bd pl5">
						<ul class="weui_uploader_files gzbx_pic img-click" style="padding-left: 0;">
							<c:forEach var="item" items="${detail.sendeeAttachList }">
								<c:if test="${item.attachmentType == 'image' }">
									<li class="weui_uploader_file"><img onclick="imgClick(this)" src="${config.imgUrl }${item.attachmentUrl}"></li>
								</c:if>
							</c:forEach>
	                    </ul>
	                </div>
				</div>
				<div class="pl10 pb10 p5">
					<c:forEach var="item" items="${detail.sendeeAttachList }">
						<c:if test="${item.attachmentType != 'image' }">
							<div class="xtbg-upload-list mb10">
								<div class="xtbg-upload-list-inner">
									<p>${item.attachmentName}</p>
									<a href="${config.imgUrl}${item.attachmentUrl}" class="weui_btn weui_btn_mini weui_btn_primary f-white bg-blue">查看</a>
								</div> 
							</div>
						</c:if>
					</c:forEach>
				</div>
			</c:if>
       </div>
       <div class="wdgz-list-link tcenter">
			<c:if test="${detail.feedback == null}">
				<a href="javascript:;" id="feedbackBtn" onclick="feedback(${detail.feedbackId})" class="wdgz-list-link-fk">反馈</a>
			</c:if>
			<c:choose>
				<c:when test="${detail.isFinished == 1 }">
					<a href="javascript:;" class="wdgz-list-link-success f-green">已完成</a>
				</c:when>
				<c:otherwise>
					<a href="javascript:;" id="finishBtn" onclick="finished(${detail.feedbackId})" class="wdgz-list-link-success">确认完成</a>
				</c:otherwise>
			</c:choose>
		</div>
	</div>
	
	<div id="feedbackDiv" class="weui_tab tab-bottom" style="display:none;z-index: 100;background-color: #f8f8f8;">
		<input type="hidden" id="feedbackId"/>
		<div class="weui-header h44"> 
	       	<div class="weui-header-left" id="feedbackBack"> <a class="icon icon-109">取消</a>  </div>
		</div>
		
		<div class="xtbg-add-listOuter">
			<div class="weui_cells borderLeft xtbg-add-list" style="margin-top:0;">
	            <div class="weui_cell tjjsqj-line-top">
					<div class="weui_cell_primary">
	                    <textarea id="feedback" class="weui_textarea" placeholder="请输入反馈结果" rows="5"></textarea>
					</div>
				</div>
				<div class="weui_uploader">
                    <div class="weui_uploader_bd">
                         <ul class="weui_uploader_files img-click" id="img1">
                      	 </ul>
                         <div class="weui_uploader_input_wrp" id="filePicker" style="margin-bottom: 20px; margin-left: 15px; width: 60px; height: 60px; border-radius: 5px;">
                         </div>
                    </div>
                </div>
	        </div>
		</div>
		
        <div class="weui_cells weui_cells_access">
        	<form id="uploadForm" enctype="multipart/form-data" method="post">
	        	<a class="weui_cell" href="javascript:;">
	                <div class="weui_cell_hd"><img src="<%=basePath %>/images/wenjianchuanyue@3x.png" alt="" style="width:20px; margin-right:10px;display:block"></div>
	                <div class="weui_cell_bd weui_cell_primary">
	                    <p>文件</p>
	                </div>
	                <div class="weui_btn weui_btn_mini weui_btn_primary f-white bg-blue">
						上传<input class="weui_uploader_input" type="file" accept="application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel,application/x-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" id="uploadTheFile">
					</div>
	            </a>
	         </form>
        </div>
        
        <div class="upload_info hide" id="fileDiv">
               <ul id="fileList"></ul>
               <div class="cover hide"></div>
               <img class="hide" src="<%=basePath %>/images/loading.gif" alt="">
           </div>
		
		<div class="weui_btn_area">
	        <a href="javascript:" class="weui_btn bg-blue" id="office_submit">提交反馈</a>
	    </div>
	</div>
</body>
<jsp:include page="/WEB-INF/page/common/_footer.jsp"></jsp:include>
<script type="text/javascript">
	$(function() {
		$("#feedbackBack").click(function() {
			$("#feedbackDiv").hide();
			$("#feedbackId").val(null);
			$("#feedback").val(null);
			$("#img1").html("");
			$("#fileList").html("");
		})
		$("#office_submit").click(function() {
			var text = $("#feedback").val();
			if(text.trim().length == 0) {
				alert("请输入反馈结果");
				return;
			}
      		var params = {
      			feedbackId: $("#feedbackId").val(),
      			feedback: text
      		}
      		feedbackSubmit(params);
		})
		//拍照或从手机相册中选图接口
	    $('#filePicker').on('click', function () {
	        wx.chooseImage({
	            count: 9,
	            needResult: 1,
	            sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
	            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
	            success: function (res) {
	           		var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
	           		wxuploadImage(localIds);
	            },
	            fail: function (res) {
	                alterShowMessage("操作提示", JSON.stringify(res), "1", "确定", "", "", "");
	            }
	
	        });
	    });
	})
	function wxuploadImage(localIds) {  
		var localId = localIds.pop();
        wx.uploadImage({  
            localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得  
            isShowProgressTips: 1, // 默认为1，显示进度提示  
            success: function (res) {  
                mediaId = res.serverId; // 返回图片的服务器端ID
                wechatMediaDownload(mediaId);
                if(localIds.length > 0){
                	wxuploadImage(localIds);
                }
            },  
            fail: function (error) {  
                alert(Json.stringify(error));  
            }  
        });
   }  
   function wechatMediaDownload(mediaId) {
	   	var params = {};
	   	params.mediaId = mediaId;
        params.attachmentType = "image";
        params.relationType = "${relationType}";
        params.relationId = "${detail.feedbackId}";
        $.ajax({
	 		url : basePath + "/ls/attchment/upload/wx",
	 		type : "post",
	 		data : params,
	 		dataType : "json",
	 		async : false,
	 		success : function(data) {
	 			if(data.code != '000') {
	 				$.toast(data.msg, "cancel");
	 			}else {
	 				$('#img1').append('<li class="weui_uploader_file" data-id="'+data.data.id+'" style="margin-right:0;margin-bottom:16px;position: relative;"><div class="img-del" onclick="imgDel(this)"><span class="icon icon-26"></span></div><img onclick="imgClick(this)"  src="'+ imgUrl + data.data.attachmentUrl +'"/></li>'); 
	 			}
	 		}, error:function(){
	 			alert("上传异常");
      			}
	 	});
   }
	function feedback(feedbackId) {
		$("#feedbackDiv").show();
		$("#feedbackId").val(feedbackId);
		initHandingAttach();
	}
	function feedbackSubmit(params) {
		$.ajax({
	      	url : basePath + "/ls/coordination/office/feedback",
	 		type : "post",
	 		dataType : "json",
	 		data : params,
	        success: function(data){
	        	if(data.code == '000') {
	        		$.toast("反馈成功");
	        		window.location.href = window.location.href+"?v="+new Date().getTime();
	        		return;
	        	}
	        	$.toptips(data.msg);
	        },
	        error: function(xhr, type){
	          
	        }
	     });
	}
	function finished(feedbackId) {
		$.confirm("您确定此工作已完成吗?", "确认完成?", function() {
			$.ajax({
	          	url : basePath + "/ls/coordination/office/finished",
	  	 		type : "post",
	  	 		dataType : "json",
	  	 		data : {
	  	 			feedbackId: feedbackId
	  	 		},
	            success: function(data){
	            	if(data.code == '000') {
	            		$.toast("提交成功");
	            		window.location.href = window.location.href+"?v="+new Date().getTime();
	            		return;
	            	}
	            	$.toptips(data.msg);
	            },
	            error: function(xhr, type){
	              
	            }
	         });
	    }, function() {
	        //取消操作
	    });
	}
	
	function initHandingAttach() {
		$.ajax({
	 		url : basePath + "/ls/attchment/handing",
	 		type : "post",
	 		dataType : "json",
	 		data: {
	 			relationType: "${relationType}",
	 			relationId: $("#feedbackId").val()
	 		},
	 		async : false,
	 		success : function(data) {
	 			if(data != null && data.length > 0) {
	 				for(var itm in data) {
	 					if(data[itm].attachmentType == 'image') {
	 						$('#img1').append('<li class="weui_uploader_file" data-id="'+data[itm].id+'" style="margin-right:0;margin-bottom:16px;position: relative;"><div class="img-del" onclick="imgDel(this)"><span class="icon icon-26"></span></div><img onclick="imgClick(this)" src="'+ imgUrl + data[itm].attachmentUrl +'"/></li>');          
	 					}else {
	 						$("#fileDiv").show();
	 						$("#fileList").append('<li>'
                            + '<span class="file_name">' + data[itm].attachmentName + '</span>'
                            + '<div class="set" data-id="'+data[itm].id+'">'
                                + '<span class="delete" onclick="fileDel(this)">删</span>'
                                + '<a href="'+imgUrl + data[itm].attachmentUrl+'"><span class="preview">预览</span></a>'
                            + '</div>'    
                        + '</li>');
	 					}
	 				}
	 			}
	 		}, error:function(){
	 			alert("查询异常");
   			}
	 	});
	}
	
    !function() {
        var fu = {
            FileArea: $('#uploadTheFile'),
            FileInfoBox: $('.upload_info'),
            FileName: $('.upload_info .file_name'),
            FileDel: $('.upload_info .delete'),
            FilePreview: $('.upload_info .preview'),
            FormArea: $('#uploadForm'),
            Loading: $('.upload_info>img'),
            Cover: $('.upload_info>.cover'),
            ShowTheUploadWin: function() {
                return fu.FileArea.click();
            },
            FileChange: function() {
                fu.FileArea.on('change', function() {
                    fu.FileUpload($(this)[0]);
                });
            },
            FileUpload: function(file) {
           	 uploadFile(file,fu);
            },
            UploadComplete: function(){
                fu.Loading.hide();
                fu.Cover.hide();
            },
            Unit: function(value) {
                value = (value >= 1024 && value < 1024 * 1024) 
                        ? (value / 1024).toFixed(2) + 'KB' 
                        : (value / (1024 * 1024)).toFixed(2) + 'MB'; 
                return value;
            },
            init: function() {
                fu.FileArea.next('a').on('click', function() {
                    fu.ShowTheUploadWin();
                });
                fu.FileChange();
            }
        };
        fu.init();
    }();
	function uploadFile(file, fu) {
	    if (file.files && file.files[0]) {
	    	fu.Loading.show();
	    	fu.Cover.show();
	    	var fileObj = file.files[0];
	    	var xhr = new XMLHttpRequest();
           xhr.open('POST', basePath + "/ls/attchment/upload/file");
           xhr.onload = function () {
           	fu.UploadComplete();
               if (xhr.status === 200) {
               	var resp = JSON.parse(xhr.response);
               	if(resp.code == '000') {
               		$.toast("上传成功");
               		$("#fileDiv").show();
               		fu.FileInfoBox.find('ul').append('<li>'
                               + '<span class="file_name">' + fileObj.name + '</span>'
                               + '<div class="set" data-id="'+resp.data.id+'">'
                                   + '<span class="delete" onclick="fileDel(this)">删</span>'
                                   + '<a href="'+imgUrl + resp.data.attachmentUrl+'"><span class="preview">预览</span></a>'
                               + '</div>'    
                           + '</li>');
               	}else {
               		$.toptips(resp.msg);
               	}
               }
           };
           xhr.onerror = function () {
           	alert("上传异常");
           };
           var fd = new FormData();
           // 添加参数
           var fileName = fileObj.name;
           fd.append('attachmentName', fileName);
           fd.append('attachmentSize', fileObj.size);
           fd.append('files', fileObj);
           fd.append('attachmentType', fileName.substr(fileName.lastIndexOf(".")+1, fileName.length));
           fd.append('relationType', "${relationType}");
           fd.append('relationId', $("#feedbackId").val());
           // 触发上传
           xhr.send(fd);
	    }
	}
	
	function imgClick1(thiz) {
		var obj = $(thiz.closest(".imgClick")).find("img");
		var src = get_img(obj);
		var currSrc = thiz.src;
		var current;
		for(var i in src) {
			if(src[i] == currSrc) {
				current = i;
				break;
			}
		}
		img_preview(src[current], src);
	}
	function img_preview(current, urls){
	    if(!current || urls.length == 0){
	        return ;
	    }
	
	    WeixinJSBridge.invoke('imagePreview', { 
	        'current': current,
	        'urls': urls
	    }); 
	}
	function get_img(obj){
		var m = [];
		for(var i=0; i<obj.length; i++){
			m[i] = obj[i].src;
		}
		return m;
	}
</script>
</html>